<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="shortcut icon" href="http://18715232917.host3v.com/peanut.ico" type="image/x-icon">
  <script src="./javascripts/common/jquery.min.js"></script>
  <link rel="stylesheet" href="./stylesheets/css/myCssReset.css">
  <link rel="stylesheet" href="./stylesheets/css/moremovie.css">

</head>

<body>
  <header id="header"></header>
  <div class="main">
    <div class="left_main">

      <div class="filter">
        <h4>选电影</h4>
        <div class="tags">

          <label for="comedy" style="background-color: #4B8CCB;color: #fff;">
            喜剧
            <input type="radio" name="tag" id="comedy" value='喜剧' checked>
          </label>
          <label for="scientific">
            科幻
            <input type="radio" name="tag" id="scientific" value='科幻'>
          </label>
          <label for="suspense">
            悬疑
            <input type="radio" name="tag" id="suspense" value='悬疑'>
          </label>
          <label for="horrible">
            恐怖
            <input type="radio" name="tag" id="horrible" value='恐怖'>
          </label>
          <label for="plot">
            剧情
            <input type="radio" name="tag" id="plot" value='剧情'>
          </label>
          <label for="love">
            爱情
            <input type="radio" name="tag" id="love" value='爱情'>
          </label>
        </div>
        <div class="tool">
          <label for="mrate">
            <input type="radio" name="sort" id="mrate" value="mrate" checked='checked'>
            按热度排序
          </label>
          <label for="mshowdate">
            <input type="radio" name="sort" id="mshowdate" value="mshowdate">
            按时间排序
          </label>
          <label for="mscore">
            <input type="radio" name="sort" id="mscore" value="mscore">
            按评分排序
          </label>

        </div>
      </div>

      <div class="content" id="moviecontent">
        <ul></ul>
      </div>

      <div class="loadmore" id="more">
        <a href="javascript: void(0)">加载更多</a>
      </div>
      <div class="loadmore2" id="more2">
        <a href="javascript: void(0)">加载更多</a>
      </div>
    </div>
    <div class="right_main">
      <div class="scorebillboard">
        <h4 class="banner">
          电影热搜榜
        </h4>
        <ul>
        </ul>
      </div>
    </div>
  </div>
  <footer id="footer"></footer>
</body>
<script>

  // 加载头尾部
  $('#header').load('./common/header.html')
  $('#footer').load('./common/footer.html')

  // 给选中的标签设置颜色
  $('.filter .tags label').click(function () {
    $(this).siblings().css('backgroundColor', '#FFF').css('color', '#666666')
    $(this).css('backgroundColor', '#4B8CCB').css('color', '#fff')
  })

  // 页面初始加载获取选中的input的value值
  let fenlei = $('input[name="tag"]:checked').val()
  let paixu = $('input[name="sort"]:checked').val()

  /* -------------------------------------- */
  var flag = true;

  // 保存每次加载的电影数据dom
  let str = ''
  // 每次请求页首
  let page = 0
  // 记录按钮点击次数，index与count相乘即为下次请求的页首
  let index = 0
  // 每次请求条数
  let count = 5
  // 这是电影ul
  const ul = $('#moviecontent ul')

  $('#more2').css('display', 'none')
  // 首次先加载数据
  $.ajax({
    url: 'http://localhost:3000/more/movie',
    method: 'post',
    data: {
      mcategory: fenlei,
      option: paixu,
      page: page
    },
    success: result => {
      index += 1
      page = index * count
      loadMovie(str, result.data, ul)

      // 给li绑定点击事件
      $('#moviecontent ul li').each(function (i) {
        $(this).click(function () {
          console.log(1);
          const titlescore = $(this).find('.titlescore').text()
          const title = titlescore.split(' ')[0]
          console.log(title);
          // 修改a链接的href值
          $(location).attr('href', `http://localhost:3000/movieinfo.html?mname=${title}`)
        })
      })


      // 鼠标移入弹出电影信息

      ul.children('li').mouseover(function () {
        $(this).find('.alertinfo').css('display', 'block')
        $(this).siblings('li').find('.alertinfo').css('display', 'none')
      })

      // 鼠标移出，关闭弹出框
      ul.children('li').mouseleave(function () {
        $(this).find('.alertinfo').css('display', 'none')
      })

      // 判断如果电影加载完，则隐藏加载更多按钮
      let child = ul.children('li')
      if (child.length % 5 != 0) {
        $('#more').css('display', 'none')
      }
    },
    error: err => {
      console.log(err);
    }
  })

  // 点击加载更多

  $('#more').click(function () {
    $.ajax({
      url: 'http://localhost:3000/more/movie',
      method: 'post',
      data: {
        mcategory: fenlei,
        option: paixu,
        page: page
      },
      success: result => {
        index += 1
        page = index * count
        loadMovie(str, result.data, ul)


        // 给li绑定点击事件
        $('#moviecontent ul li').each(function (i) {
          $(this).click(function () {
            console.log(1);
            const titlescore = $(this).find('.titlescore').text()
            const title = titlescore.split(' ')[0]
            console.log(title);
            // 修改a链接的href值
            $(location).attr('href', `http://localhost:3000/movieinfo.html?mname=${title}`)
          })
        })
        // 鼠标移入弹出电影信息
        ul.children('li').mouseover(function () {
          $(this).find('.alertinfo').css('display', 'block')
          $(this).siblings('li').find('.alertinfo').css('display', 'none')
        })


        // 鼠标移出，关闭弹出框
        ul.children('li').mouseleave(function () {
          $(this).find('.alertinfo').css('display', 'none')
        })

        // 判断如果电影加载完，则隐藏加载更多按钮
        let child = ul.children('li')
        if (child.length % 5 != 0) {
          $('#more').css('display', 'none')
        }

      },
      error: err => {
        console.log(err);
      }
    })

  })


  // 每次传入的电影数据
  function loadMovie(currentstr, arr, ul) {
    for (const i of arr) {
      currentstr = currentstr +
        `<li>
            <img src="${i.mimage}">
            <p class="titlescore">${i.mname} <strong>${i.mscore}</strong></p>
            <div class="alertinfo">
                <h5 class="alerttitle">${i.mname + '(' + i.mshowdate + ')'}</h5>
                <div class="alertscore">
									<div></div>
									<span>${i.mscore}</span>						
									</div>
                <div class="alerttag">
                  <span>${i.mlength + '分钟'}</span>
                  <span>${i.mdirector}</span>
                  <span>${i.mcategory}</span>
                  <span>${i.mactor}</span>
                </div>
                <p class="introduction">${i.mintroduction.slice(0, 120) + '......'}</p>
              </div>
            </li>`
    }
    ul.html(currentstr)
    str = currentstr
  }



  /* -------------------------------------- */


  // 这是筛选条件时再次调用ajax
  $('.filter input').click(function () {
    $('#more2').css('display', 'block')
    $('#more').css('display', 'none')
    // 获取被选中的input的value值
    let selectcategory = $('input[name="tag"]:checked').val()
    let selectsort = $('input[name="sort"]:checked').val()

    // 保存每次加载的电影数据dom
    let str = ''
    // 每次请求页首
    let page = 0
    // 记录按钮点击次数，index与count相乘即为下次请求的页首
    let index = 0
    // 每次请求条数
    let count = 5
    // 这是电影ul
    const ul = $('#moviecontent ul')
    // 首次先加载数据
    $.ajax({
      url: 'http://localhost:3000/more/movie',
      method: 'post',
      data: {
        mcategory: selectcategory,
        option: selectsort,
        page: page
      },
      success: result => {
        index += 1
        page = index * count
        loadMovie(str, result.data, ul)

        // 给li绑定点击事件
        $('#moviecontent ul li').each(function (i) {
          $(this).click(function () {
            console.log(1);
            const titlescore = $(this).find('.titlescore').text()
            const title = titlescore.split(' ')[0]
            console.log(title);
            // 修改a链接的href值
            $(location).attr('href', `http://localhost:3000/movieinfo.html?mname=${title}`)
          })
        })

        // 鼠标移入弹出电影信息
        ul.children('li').mouseover(function () {
          $(this).find('.alertinfo').css('display', 'block')
          $(this).siblings('li').find('.alertinfo').css('display', 'none')
        })

        // 鼠标移出，关闭弹出框
        ul.children('li').mouseleave(function () {
          $(this).find('.alertinfo').css('display', 'none')
        })

        // 判断如果电影加载完，则隐藏加载更多按钮
        let child = ul.children('li')
        if (child.length % 5 != 0) {
          $('#more2').css('display', 'none')
        }
      },
      error: err => {
        console.log(err);
      }
    })

    // 点击加载更多

    $('#more2').click(function () {
      $.ajax({
        url: 'http://localhost:3000/more/movie',
        method: 'post',
        data: {
          mcategory: selectcategory,
          option: selectsort,
          page: page
        },
        success: result => {
          index += 1
          page = index * count
          loadMovie(str, result.data, ul)

          // 给li绑定点击事件
          $('#moviecontent ul li').each(function (i) {
            $(this).click(function () {
              console.log(1);
              const titlescore = $(this).find('.titlescore').text()
              const title = titlescore.split(' ')[0]
              console.log(title);
              // 修改a链接的href值
              $(location).attr('href', `http://localhost:3000/movieinfo.html?mname=${title}`)
            })
          })

          ul.children('li').mouseover(function () {
            $(this).find('.alertinfo').css('display', 'block')
            $(this).siblings('li').find('.alertinfo').css('display', 'none')
          })


          // 鼠标移出，关闭弹出框
          ul.children('li').mouseleave(function () {
            $(this).find('.alertinfo').css('display', 'none')
          })

          // 判断如果电影加载完，则隐藏加载更多按钮
          let child = ul.children('li')
          if (child.length % 5 != 0) {
            $('#more2').css('display', 'none')
          }

        },
        error: err => {
          console.log(err);
        }
      })

    })


    // 每次传入的电影数据
    function loadMovie(currentstr, arr, ul) {
      for (const i of arr) {
        currentstr = currentstr +
          `<li>
            <img src="${i.mimage}">
            <p class="titlescore">${i.mname} <strong>${i.mscore}</strong></p>
            <div class="alertinfo">
                <h5 class="alerttitle">${i.mname + '(' + i.mshowdate + ')'}</h5>
                <div class="alertscore">
									<div></div>
									<span>${i.mscore}</span>						
									</div>
                <div class="alerttag">
                  <span>${i.mlength + '分钟'}</span>
                  <span>${i.mdirector}</span>
                  <span>${i.mcategory}</span>
                  <span>${i.mactor}</span>
                </div>
                <p class="introduction">${i.mintroduction.slice(0, 120) + '......'}</p>
              </div>
            </li>`
      }
      ul.html(currentstr)
      str = currentstr
    }

  })


  // 右侧电影热搜榜
  $.ajax({
    url: 'http://localhost:3000/more/rate',
    success: result => {
      // console.log(result);   
      let str = ''
      for (const i in result.data) {
        str = str +
          `<li>
            <span>${i - -1}</span><a href="javascript: void(0)" class="scoretitle">${result.data[i].mname}</a>
          </li>`
      }
      $('.right_main .scorebillboard ul').html(str)

      // 给li绑定点击事件
      $('.right_main .scorebillboard ul li').each(function (i) {
        $(this).click(function () {
          const title = $(this).find('.scoretitle').text()
          // 修改a链接的href值
          $(location).attr('href', `http://localhost:3000/movieinfo.html?mname=${title}`)
        })
      })

    },
    error: err => {
      console.log(err);
    }
  })

</script>

</html>